<template>
	<el-form :model="form">
		<el-form-item label="产品名称" :label-width="formLabelWidth">
			<el-input v-model="form.goods_name" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="车型分类" :label-width="formLabelWidth">
			<el-cascader v-model="form.id" :options="options" @change="handleChange"></el-cascader>
		</el-form-item>
		<el-form-item label="头图" :label-width="formLabelWidth">
			<el-upload class="avatar-uploader" :action="`${api}/index.php/index/userinfo/uploadfile`"
				:show-file-list="false" :on-success="handleAvatarSuccess">
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>
		<el-form-item label="360图" :label-width="formLabelWidth">
			<ul class="el-upload-list el-upload-list--picture-card">
				<Draggable :list="picfileList" :animation="100" item-key="id" class="list-group" :forceFallback="true"
					ghost-class="ghost" @change="onMoveCallback">
					<template #item="{ element,index }">

						<div style="display: inline-block;">

							<li class="el-upload-list__item is-success">
								<img class="el-upload-list__item-thumbnail" :src="element.response.data" alt="">

								<i class="el-icon-close"></i>
								<i class="el-icon-close-tip">press delete
									to remove</i>
								<span class="el-upload-list__item-actions">
									<span @click="handlePictureCardPreview(element.response.data)"
										class="el-upload-list__item-preview"><i class="el-icon-zoom-in"></i></span>
									<span @click="handleRemove(index)" class="el-upload-list__item-delete"><i
											class="el-icon-delete"></i></span>
								</span>
							</li>
						</div>
					</template>
				</Draggable>

			</ul>
			<el-upload :action="`${api}/index.php/index/userinfo/uploadfile`" :show-file-list="false"
				list-type="picture-card" :on-success="handleAvatarSuccesss" :auto-upload="true">
				<i class="el-icon-plus"></i>


			</el-upload>

			<el-dialog v-model="dialogVisible">
				<img style="width: 100%;" :src="dialogImageUrl" alt="" />
			</el-dialog>
		</el-form-item>
	</el-form>
</template>

<script>
	import Draggable from 'vuedraggable'
	import {
		mounted,
		ref,
		reactive,
		toRefs
	} from "vue";
	export default {

		components: {
			Draggable,
		},
		props: ['data'],
		emits: {

			open: (value) => {

			},

		},
		
		setup(props) {
			console.log(props)
			const data = reactive({ // 建立一个响应式对象
				picfileList: [],
				dialogImageUrl: '',
				options: [{
					value: 'guide',
					label: 'Guide',
					children: [{
						value: 'disciplines',
						label: 'Disciplines',


					}, ]
				}],
				value: [],
				imageUrl: "",
				dialogVisible: false,
				form:props.form,
				formLabelWidth: '120px',
			});
			const handleChange = (value) => {
				console.log(data.value)
			}
			const onMoveCallback = (val) => {

			}
			const handleRemove = (index) => {
				data.picfileList.splice(index, 1);
			}
			const handlePictureCardPreview = (file) => {

				data.dialogImageUrl = file.url
				data.dialogVisible = true
			}

			const handleAvatarSuccess = (res, file) => {
				data.imageUrl = URL.createObjectURL(file.raw)
			}
			const handleAvatarSuccesss = (res, file, fileList) => {

				data.picfileList.push(file);
			}
			const handleDelete = () => {
				ElMessageBox.confirm(
						'是否确定删除?',
						'警告', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						ElMessage({
							type: 'success',
							message: 'Delete completed',
						})
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: 'Delete canceled',
						})
					})
			}

			return {
				//必须返回 模板中才能使用
				...toRefs(data), //讲响应式的对象变为普通对象 在家。。。结构，在模板中就可以直接使用属性，不用data.name
				onMoveCallback,
				handleRemove,
				handlePictureCardPreview,
				handleAvatarSuccess,
				handleAvatarSuccesss,
				handleDelete,
				handleChange
			}
		}

	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow:
			hidden;
	}

	.avatar-uploader .el-upload i {
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 148px;
		height: 148px;
		line-height: 148px;
		text-align: center;
	}

	.avatar {
		width: 148px;
		height: 148px;
		display: block;
	}
</style>
